<template>

  <div class="w-full py-5 px-2 mb-2 max-w-sm bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 shadow-md">

    <h2 class=" flex  items-center mb-2 font-bold text-gray-900 uppercase dark:text-white">

      <svg t="1702352192150" class="icon w-5 h-5 ml-2 mr-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4330" width="32" height="32">
        <path
          d="M240.384 328.8064h557.4656s-32.768 197.888-283.8528 197.888-273.6128-197.888-273.6128-197.888zM844.8 903.2704H187.8016c-32.1536 0-58.2144-26.0608-58.2144-58.2144 0-32.1536 26.0608-58.2144 58.2144-58.2144H844.8c32.1536 0 58.2144 26.0608 58.2144 58.2144 0 32.1024-26.0608 58.2144-58.2144 58.2144z"
          fill="#ffa115" p-id="4331"></path>
        <path
          d="M854.8352 922.9824H176.384c-43.6224 0-79.104-35.4816-79.104-79.104s35.4816-79.104 79.104-79.104h26.7776v-0.6656c0-99.4304 46.5408-191.744 124.1088-250.9312a315.47392 315.47392 0 0 1-124.0576-250.9312v-0.6144h-26.7776c-43.6224 0-79.104-35.4816-79.104-79.104S132.8128 103.424 176.384 103.424h678.4512c43.6224 0 79.104 35.4816 79.104 79.104s-35.4816 79.104-79.104 79.104H834.56v0.6656c0 99.4304-46.5408 191.744-124.1088 250.9312A315.37152 315.37152 0 0 1 834.56 764.16v0.6656h20.2752c43.6224 0 79.104 35.4816 79.104 79.104s-35.4816 79.0528-79.104 79.0528z m-678.4512-96.768c-9.728 0-17.664 7.936-17.664 17.664s7.936 17.664 17.664 17.664h678.4512c9.728 0 17.664-7.936 17.664-17.664s-7.936-17.664-17.664-17.664H803.84c-16.9472 0-30.72-13.7728-30.72-30.72v-31.3856c0-93.5936-51.2512-179.4048-133.6832-223.8976-9.9328-5.376-16.128-15.7696-16.128-27.0336s6.1952-21.6576 16.128-27.0336A254.13632 254.13632 0 0 0 773.12 262.2464V230.912c0-16.9472 13.7728-30.72 30.72-30.72h50.9952c9.728 0 17.664-7.936 17.664-17.664s-7.936-17.664-17.664-17.664H176.384c-9.728 0-17.664 7.936-17.664 17.664s7.936 17.664 17.664 17.664h57.4976c16.9472 0 30.72 13.7728 30.72 30.72v31.3856c0 93.5936 51.2512 179.4048 133.6832 223.8976 9.9328 5.376 16.128 15.7696 16.128 27.0336s-6.1952 21.6576-16.128 27.0336a254.13632 254.13632 0 0 0-133.6832 223.8976v31.3856c0 16.9472-13.7728 30.72-30.72 30.72H176.384z"
          fill="#474A54" p-id="4332"></path>
        <path
          d="M642.9184 357.0176h-252.928c-16.9472 0-30.72-13.7728-30.72-30.72s13.7728-30.72 30.72-30.72h252.928c16.9472 0 30.72 13.7728 30.72 30.72s-13.7728 30.72-30.72 30.72zM642.9184 736.9728h-252.928c-16.9472 0-30.72-13.7728-30.72-30.72s13.7728-30.72 30.72-30.72h252.928c16.9472 0 30.72 13.7728 30.72 30.72s-13.7728 30.72-30.72 30.72z"
          fill="#474A54" p-id="4333"></path>
      </svg>

      距离下班时间还有
    </h2>

    <div v-if="flag" class="text-4xl font-bold flex justify-center text-violet-800 italic ">
      <span>{{ hours < 10 ? '0' + hours : hours }}</span>:
      <span>{{ minutes < 10 ? '0' + minutes : minutes }}</span>:
      <span>{{ seconds < 10 ? '0' + seconds : seconds }}</span>
    </div>

    <div v-else class="flex justify-center text-violet-800 text-3xl font-bold">下班喽
      <svg t="1702361733988" class="icon w-10 h-10 ml-2 -mt-2 " viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5593" width="200" height="200">
        <path
          d="M648.743382 404.237493c121.111302 123.798399 170.182811 274.361137 109.637824 336.270999l-2.473836 2.38853-2.921685 2.516488-3.369534 2.665771-3.83871 2.83638-4.265233 2.964337-4.713083 3.113621-5.182259 3.262903-5.608782 3.412187-9.255556 5.39552-6.739069 3.774732-10.96165 5.95-11.942653 6.269893-12.966309 6.611112-9.191578 4.585126-14.651077 7.144266-26.657709 12.667743-17.316847 8.061291-31.136204 14.139248-41.052871 18.169895-45.083517 19.513442-40.647674 17.274195-43.441401 18.191221-46.277783 19.108245-69.437999 28.32115-52.974198 21.326167-102.856103 40.796957a38.173839 38.173839 0 0 1-41.415416-8.914338l-37.83262-38.66434a40.263803 40.263803 0 0 1-8.743728-42.332442l26.998927-71.293375 37.875272-98.505565 23.629393-60.523662 25.911293-65.386027 24.162547-59.798572 19.300181-46.768284 15.098926-35.82796 14.181901-32.970254 10.705736-24.31183 10.129929-22.47778 7.22957-15.674733 9.106274-19.257529 6.461828-13.264875 6.141936-12.219894 5.822044-11.174911 7.250897-13.328855 3.412186-5.971326 4.84104-8.103944 3.028316-4.819713 2.921685-4.350539 2.751075-3.924014 2.623119-3.454839 2.452509-2.985664 2.345878-2.537813c60.566314-61.909862 207.823496-11.729392 328.934798 112.111659z"
          fill="#CF411C" p-id="5594"></path>
        <path
          d="M634.945352 418.035523c-112.602161-115.097323-246.445184-161.993563-298.353074-115.012018l-2.55914 2.473835-1.663441 1.748746-1.962008 2.345878-2.217921 2.921685-2.452509 3.454839-2.665771 3.987993-2.772402 4.414517-4.649104 7.741398-3.220251 5.630108-7.080288 12.987636-5.67276 10.940324-6.035305 12.027958-6.376524 13.030288-9.042295 19.086919-7.144266 15.504123-10.065951 22.328497-10.620431 24.162547-14.139248 32.842297-15.034948 35.678677-19.257529 46.640327-24.098568 59.670615-25.889967 65.300723-23.58674 60.438357-37.83262 98.42026-26.998928 71.272049a20.537099 20.537099 0 0 0 2.72975 19.534769l1.706093 1.983334 37.811294 38.643014c4.798388 4.926345 11.686739 6.824373 18.127242 5.224911l2.409857-0.767742 102.749472-40.775631 52.888893-21.283515 69.395347-28.278497 46.171152-19.065593 43.356097-18.148568 40.519717-17.231543 44.934233-19.449464 40.882262-18.105916 30.986921-14.07527 17.167564-7.975986 26.465773-12.582439 14.501793-7.080287 9.063621-4.499821 12.753048-6.504481 11.708066-6.141936 10.705735-5.822044 6.483155-3.625448 8.95699-5.203585 5.331542-3.241577 4.819714-3.049642 4.350538-2.857706 3.817384-2.644445 3.305555-2.409857 2.72975-2.153943 2.175269-1.83405 2.025986-1.940681c50.543015-51.673302 4.947671-191.530305-109.637824-308.674939z"
          fill="#F66E2E" p-id="5595"></path>
        <path
          d="M336.592278 303.023505c51.90789-46.981546 185.750913-0.085305 298.353074 115.012018 81.636567 83.470617 128.255567 178.457364 130.046965 244.867047l-1.10896 1.023656-2.175269 1.834051-2.72975 2.153943-3.305556 2.431183-3.83871 2.644444-4.329211 2.857707-4.84104 3.049642-5.331542 3.220251-8.95699 5.203584-6.461829 3.625449-10.705735 5.822043-11.729392 6.141936-12.731722 6.504481-9.063621 4.521148-14.501793 7.080287-26.444447 12.582439-17.188891 7.975986-30.98692 14.07527-40.882262 18.105916-44.934233 19.449464-40.519717 17.210217-43.356098 18.148568-46.171151 19.086919-69.374021 28.257171-52.888893 21.304841-102.792125 40.775631-69.864522 31.605379-9.810037-10.023298-1.684767-1.962008a20.515773 20.515773 0 0 1-3.497492-17.018281l0.767742-2.516488 26.998928-71.272049 37.83262-98.42026 23.58674-60.438357 25.889967-65.300723 24.098568-59.670615 19.257529-46.640327 15.034948-35.700003 14.139248-32.820971 10.620431-24.162547 10.065951-22.328497 7.144266-15.504123 9.042295-19.086919 6.376524-13.030288 6.035305-12.027958 5.67276-10.940324 7.080288-12.987636 3.198925-5.630108 4.649104-7.741398 2.793728-4.414517 2.665771-3.987993 2.452509-3.454839 2.217921-2.921685 1.962008-2.345878 1.642114-1.748746 2.55914-2.473835z"
          fill="#FD9816" p-id="5596"></path>
        <path
          d="M391.933681 285.258808h-2.836381c-22.008604 0.426523-39.66667 6.419176-52.078499 17.380826l-2.985663 2.857706-1.663441 1.748746-1.962008 2.345878-2.217921 2.921685-2.452509 3.454839-2.665771 3.987993-2.772402 4.414517-4.649104 7.741398-3.220251 5.630108-7.080288 12.987636-5.67276 10.940324-6.035305 12.027958-6.376524 13.030288-9.042295 19.086919-7.144266 15.504123-10.065951 22.328497-10.620431 24.162547-14.608424 33.929932 1.535484 9.212904a1018.687012 1018.687012 0 0 0 144.143562 373.805052l7.720072 11.96398 8.359858-3.433513 43.356097-18.148568 10.129929-4.329212-2.985663-7.592115c-70.696243-181.48568-90.29499-380.181576-57.090149-572.436971l0.981004-5.544803zM161.675057 683.418343l-9.703406 24.525092-24.077242 61.696601 3.28423 9.490144a1013.35547 1013.35547 0 0 0 79.397319 170.737292l9.340861 15.696058 9.170252-3.625448 38.579035-15.568102L263.123633 938.351342A1056.519632 1056.519632 0 0 1 166.302835 701.119061l-4.649104-17.700718z"
          fill="#FFD217" p-id="5597"></path>
        <path
          d="M319.808584 292.125834c60.566314-61.909862 207.823496-11.729392 328.934798 112.111659 121.111302 123.798399 170.182811 274.361137 109.637824 336.270999-60.566314 61.909862-207.823496 11.729392-328.934798-112.090333-121.132628-123.819725-170.204138-274.382463-109.637824-336.292325z"
          fill="#CF411C" p-id="5598"></path>
        <path
          d="M634.945352 418.035523c-114.50019-117.05933-251.008984-163.5717-301.338738-112.090333-50.543015 51.651976-4.947671 191.508978 109.616498 308.653613 114.521516 117.080656 251.008984 163.5717 301.360064 112.111659 50.543015-51.673302 4.947671-191.530305-109.637824-308.674939z"
          fill="#B03414" p-id="5599"></path>
        <path
          d="M590.203054 115.310584a9.68208 9.68208 0 0 1 12.369177 6.013979c33.482082 96.436927 15.35484 177.433708-36.297136 248.215256-5.886022 8.061291-12.006632 15.717385-18.596418 23.373479l-8.061291 9.106273-17.700718 18.980289a9.618101 9.618101 0 0 1-13.6914 0.55448 9.895341 9.895341 0 0 1-0.533154-13.862008l17.615414-18.91631 1.27957-1.407527c8.807707-9.810037 16.63441-19.321507 24.077243-29.494089 48.090506-65.897856 64.746243-140.326178 33.610038-230.045362a9.852689 9.852689 0 0 1 5.928675-12.51846z"
          fill="#17BA55" p-id="5600"></path>
        <path
          d="M677.149836 535.905247c92.704847-69.54463 183.149121-92.982087 271.140885-44.187818 4.691757 2.601792 6.39785 8.573119 3.838711 13.328854a9.639427 9.639427 0 0 1-13.179572 3.881363c-79.823843-44.273122-162.953241-22.733694-250.241241 42.737638a626.776044 626.776044 0 0 0-35.038893 28.427781l-36.041222 32.053228-2.025985 1.706094a9.618101 9.618101 0 0 1-13.648747-1.428853 9.895341 9.895341 0 0 1 1.428853-13.819357l28.363802-25.250181a689.709562 689.709562 0 0 1 45.403409-37.448749z"
          fill="#FC5965" p-id="5601"></path>
        <path
          d="M735.071705 284.448413a9.703406 9.703406 0 0 1 11.68674 7.272223c12.753048 54.381725-20.174554 105.671157-83.662553 156.17152-9.852689 7.826703-20.089249 15.376166-31.200182 23.074913l-19.406812 13.051614-19.577421 12.7957a9.639427 9.639427 0 0 1-13.435485-2.857706 9.895341 9.895341 0 0 1 1.27957-12.326525l1.642115-1.322222 30.219178-19.854661c14.07527-9.490144 26.615056-18.553765 38.493731-28.001258 58.092479-46.192477 87.224022-91.57456 76.774201-136.188901a9.810037 9.810037 0 0 1 7.186918-11.814697z"
          fill="#FFD217" p-id="5602"></path>
        <path
          d="M273.232236 239.364897l-0.213262-3.540144a35.870613 35.870613 0 0 0-2.985663-10.876345 44.934234 44.934234 0 0 0-5.67276-9.148926 94.453593 94.453593 0 0 0-11.302869-11.836022l-5.096954-4.414517-16.293191-13.52079c-25.889967-21.710038-36.254484-37.064878-33.71667-56.57832 3.625448-28.171866 17.977959-41.628678 45.382083-42.716312a9.767384 9.767384 0 0 0 9.319535-10.193908 9.746058 9.746058 0 0 0-10.087277-9.426166c-36.915595 1.492832-59.009504 22.179214-63.850544 59.777246-3.497491 26.934949 8.615771 46.533696 36.105201 70.440329l21.880647 18.276525c5.736739 4.947671 9.68208 8.829033 12.433155 12.369177 1.471506 1.855377 2.537814 3.56147 3.220252 5.11828a16.058604 16.058604 0 0 1 1.364874 4.905018c0.895699 8.189248-4.371864 18.169894-15.418818 30.496419l-4.137277 4.39319-13.179571 13.328854-4.926344 5.267564a9.895341 9.895341 0 0 0 1.215591 13.819356c3.604122 3.049642 8.743728 2.985663 12.262546 0.149283l5.694087-5.907348 13.90466-14.053944c15.738711-16.570432 24.397135-30.858963 24.098569-46.128499z"
          fill="#CF411C" p-id="5603"></path>
        <path
          d="M742.685147 823.829826l3.518817 0.255914c3.668101 0.405197 7.272223 1.407527 10.748388 3.006989 3.049642 1.407527 6.035305 3.326882 9.042295 5.715413 3.753405 2.985663 7.464158 6.67509 11.68674 11.452151l4.39319 5.139607 13.35018 16.485127c21.454124 26.209859 36.659681 36.659681 55.959862 34.121867 27.830648-3.689427 41.138176-18.19122 42.225811-45.936564a9.746058 9.746058 0 0 1 10.06595-9.404839c5.374194 0.213262 9.532797 4.777061 9.319535 10.193907-1.471506 37.342118-21.944626 59.691941-59.094808 64.618286-26.657709 3.497491-46.021868-8.743728-69.651261-36.55305l-18.063263-22.136561a91.851801 91.851801 0 0 0-12.219894-12.582439 25.356812 25.356812 0 0 0-5.054301-3.241577 15.610754 15.610754 0 0 0-4.84104-1.386201c-8.12527-0.895699-17.977959 4.435843-30.1552 15.610754l-4.371864 4.158603-13.179572 13.35018-3.924014 3.83871a35.081544 35.081544 0 0 1-1.27957 1.151613 9.618101 9.618101 0 0 1-13.648747-1.236917 9.895341 9.895341 0 0 1-0.149283-12.41183l5.843369-5.758065 13.883335-14.07527c16.399822-15.887994 30.496419-24.653049 45.595345-24.354482zM356.318982 1.748746a9.639427 9.639427 0 0 1 13.499464 2.473835c33.524734 48.900901 44.891581 117.848398 13.456811 218.166687a9.68208 9.68208 0 0 1-12.155915 6.39785 9.831363 9.831363 0 0 1-6.333872-12.326524c29.579393-94.410941 19.236203-157.045893-10.918997-201.063102a9.895341 9.895341 0 0 1 2.452509-13.648746zM709.821524 203.089087a19.620074 19.620074 0 0 1 19.364159 19.812009 19.620074 19.620074 0 0 1-19.364159 19.833335 19.620074 19.620074 0 0 1-19.406812-19.833335 19.620074 19.620074 0 0 1 19.406812-19.833335z"
          fill="#FD9816" p-id="5604"></path>
        <path
          d="M477.217022 222.901096a19.620074 19.620074 0 0 1 19.385486 19.833335 19.620074 19.620074 0 0 1-19.406812 19.790683 19.620074 19.620074 0 0 1-19.36416-19.812009 19.620074 19.620074 0 0 1 19.385486-19.833335z"
          fill="#FC5965" p-id="5605"></path>
        <path
          d="M787.34214 539.957219a19.620074 19.620074 0 0 1 19.385486 19.812009 19.620074 19.620074 0 0 1-19.385486 19.812009 19.620074 19.620074 0 0 1-19.385485-19.833336 19.620074 19.620074 0 0 1 19.406811-19.790682z"
          fill="#17BA55" p-id="5606"></path>
        <path
          d="M903.633728 282.358449a19.620074 19.620074 0 0 1 19.406812 19.812009 19.620074 19.620074 0 0 1-19.406812 19.812009 19.620074 19.620074 0 0 1-19.364159-19.833335 19.620074 19.620074 0 0 1 19.364159-19.812009z"
          fill="#CF411C" p-id="5607"></path>
        <path
          d="M453.736912 81.359327l-13.307528-12.561113 17.679392-4.051971c18.041937-4.158603 35.038892-17.807349 46.917567-37.662011l11.644088-19.449464 0.55448 22.776346c0.575807 23.288174 8.637098 43.782621 22.221866 56.620973l13.328854 12.539786-17.679392 4.051972c-18.041937 4.179929-35.060218 17.807349-46.917567 37.683337l-11.644087 19.449464-0.554481-22.797673c-0.575807-23.266848-8.637098-43.782621-22.243192-56.599646zM895.231218 576.16905l8.40251-16.421149 8.423836 16.421149c8.594445 16.741041 25.889967 30.005917 47.727961 36.595702l21.390146 6.440503-21.390146 6.461828c-21.837995 6.589786-39.133516 19.833335-47.727961 36.595702l-8.423836 16.399823-8.40251-16.399823c-8.594445-16.741041-25.889967-30.005917-47.727961-36.595702l-21.390145-6.461828 21.390145-6.440503c21.837995-6.611112 39.133516-19.854661 47.727961-36.595702z"
          fill="#FFE20D" p-id="5608"></path>
      </svg>
    </div>

  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const targetTime = ref(new Date())
const flag = ref(true)

let hours = ref(0)
let minutes = ref(0)
let seconds = ref(0)

// 在页面加载时从本地存储中获取下班时间和标识位
const storedTargetTime = localStorage.getItem('targetTime')
const storedFlag = localStorage.getItem('flag')

// 设置下班时间为当天的5点半
targetTime.value.setHours(17, 30, 0, 0)

const getTimeRemaining = () => {
  const now = Date.now()

  const remaining = targetTime.value - now

  hours.value = Math.floor(remaining / (1000 * 60 * 60))
  minutes.value = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60))
  seconds.value = Math.floor((remaining % (1000 * 60)) / 1000)

  if (hours.value === 0 && minutes.value === 0 && seconds.value === 0) {
    flag.value = false
  }

  return { hours, minutes, seconds }
}

// 使用computed创建计算属性，实时更新剩余时间
const countdown = computed(getTimeRemaining)

// 当页面销毁时，将下班时间和标识位存储到本地存储中
onMounted(() => {
  const intervalId = setInterval(() => {
    getTimeRemaining()
    if (!flag.value) {
      clearInterval(intervalId)
    }
  }, 1000)
})
</script>